<template>
	<view class="content">
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" :autoplay="autoplay" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<image class="image" :src="item.url" mode="aspectFill" :draggable="false" @click="onBanner(index)" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<uni-section title="功能" type="line" padding>
			<uni-grid :column="4" :show-border="false" :square="false" :highlight="true">
				<uni-grid-item>
					<view class="grid-item-box" @click="goToWarehouse" style="background-color: #f1f1f1">
						<image src="/static/images/image/xiezi.png" class="imageXiezi" mode="aspectFill" />
						<text class="text">鞋库</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			info: [
				{
					colorClass: 'uni-bg-red',
					url: '../static/images/image/swiper/lunbo1.jpg',
					content: '内容 A'
				},
				{
					colorClass: 'uni-bg-green',
					url: '../static/images/image/swiper/lunbo2.jpg',
					content: '内容 B'
				},
				{
					colorClass: 'uni-bg-blue',
					url: '../static/images/image/swiper/lunbo3.jpg',
					content: '内容 C'
				}
			],
			dotStyle: [
				{
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				},
				{
					backgroundColor: 'rgba(255, 90, 95,0.3)',
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				{
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				}
			],
			modeIndex: -1,
			styleIndex: -1,
			autoplay: true,
			current: 0,
			mode: 'default',
			dotsStyles: {},
			swiperDotIndex: 0
		};
	},
	methods: {
		goToWarehouse(e) {
			uni.navigateTo({
			  url: '/pages/warehouse/index'
			});
		},

		change(e) {
			this.current = e.detail.current;
		},
		selectStyle(index) {
			this.dotsStyles = this.dotStyle[index];
			this.styleIndex = index;
		},
		selectMode(mode, index) {
			this.mode = mode;
			this.modeIndex = index;
			this.styleIndex = -1;
			this.dotsStyles = this.dotStyle[0];
		},
		clickItem(e) {
			this.swiperDotIndex = e;
		},
		onBanner(index) {
			console.log(22222, index);
		}
	}
};
</script>

<style lang="scss">
.uni-section {
	background-color: #f1f1f1 !important;
}

.imageXiezi {
	width: 45px;
	height: 30px;
}

.text {
	font-size: 14px;
	margin-top: 7px;
}

.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

// 轮播
.swiper-box {
	height: 200px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200px;
	color: #fff;
}

.swiper-item0 {
	background-color: #cee1fd;
}

.swiper-item1 {
	background-color: #b2cef7;
}

.swiper-item2 {
	background-color: #cee1fd;
}

.image {
	width: 750rpx;
}

/* #ifndef APP-NVUE */
::v-deep .image img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

/* #endif */

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		margin: 0 auto;
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}

.uni-bg-red {
	background-color: #ff5a5f;
}

.uni-bg-green {
	background-color: #09bb07;
}

.uni-bg-blue {
	background-color: #007aff;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	padding: 20rpx;
}

.example-body-item {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin: 15rpx;
	padding: 15rpx;
	height: 60rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	padding: 0 15rpx;
	/* #endif */
	flex: 1;
	border-color: #e5e5e5;
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
}

.example-body-item-text {
	font-size: 28rpx;
	color: #333;
}

.example-body-dots {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50px;
	background-color: #333333;
	margin-left: 10rpx;
}

.active {
	border-style: solid;
	border-color: #007aff;
	border-width: 1px;
}
</style>
